<template>
  <div class="file-update">
    <h4>{{ title }}</h4>
    <div class="file-preview"></div>
    <div class="buttons">
      <el-select size="mini"></el-select>
      <el-button size="mini" type="primary">截图</el-button>
      <el-button size="mini" type="primary">上传</el-button>
      <el-button size="mini" type="danger">删除</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
@Component
class FileUpdate extends Vue {
  @Prop() title!: string
}
export default FileUpdate
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.file-update {
  width: 100%;
  height: 100%;
  #flex(column, center, flex-start);
  h4 {
    margin-block: 0;
    margin: 5px 0;
  }
  .file-preview {
    width: 100%;
    flex: 1;
    margin: 5px 0;
    border: solid 1px;
    #color(border-color, --primary-border-color);
    #flex(row, center, center);
  }
  .buttons {
    width: 100%;
    margin: 5px 0;
    #flex(row, center, flex-start);
    .el-select {
      flex: 1;
      margin-right: 5px;
    }
  }
}
</style>
